<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="cards">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>新增排班类型</span>
        </div>
      </template>

      <div class="first">
        <div class="information">
          <el-form ref="ruleFormRef" label-width="200px"  :model="ruleForm" class="demo-ruleForm">
            <el-form-item class="required" label="排班类型:" prop="scheduling">
              <el-input v-model="ruleForm.type" type="text"></el-input>
            </el-form-item>


            <el-form-item class="xrequired" label="上班时间:" prop="startWork">
              <div class="example-basic">
                <el-time-picker v-model="ruleForm.checkInTime" placeholder="请选择" />
              </div>
            </el-form-item>
            <el-form-item class="xrequired" label="下班时间:" prop="endWork">
              <div class="example-basic">
                <el-time-picker v-model="ruleForm.checkOutTime" placeholder="请选择" />
              </div>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="addSchedulefn(ruleForm)">
                提交
              </el-button>
              <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
          </el-form>
        </div>

      </div>




    </el-card>



  </div>

</template>
<script setup lang="ts">
import { reactive, ref } from 'vue';
import { ElForm } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus'
import { getScheduleList } from '@/api/schedule'
import type { scheduleAdd } from '@/model'
import type { schedule } from '@/model'
import { addSchedule } from '@/api/schedule'
import { useRouter } from 'vue-router'
const router = useRouter()
const ruleFormRef = ref<FormInstance>()




const ruleForm = ref<scheduleAdd>({
  type: '',
  checkInTime: '',
  checkOutTime: ''
})
//提交按钮
const addSchedulefn = async (ruleForm:scheduleAdd) => {
  console.log(ruleForm)
  const res = await addSchedule(ruleForm)
  router.push('/PaiBanLeixing')
    ElMessage.success('添加成功')
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
interface RuleForm {
  scheduling: string,
  startWork: string,
  endWork: string

}
// const rules = reactive<FormRules<RuleForm>>({
//   scheduling: [
//     { required: true, message: '请输入排班类型', trigger: 'blur' },
    
//   ],
//   startWork: [
//     { required: true, message: '请选择上班时间', trigger: 'change' }
//   ],
//   endWork: [
//     { required: true, message: '请选择下班时间', trigger: 'change'}]

// })

//获取排班类型
// const scheduleList = ref<schedule[]>([])
// const getScheduleListData = async () => {
//   const res = await getScheduleList()
//   scheduleList.value = res.data
// }
// getScheduleListData()



</script>
<style scoped>
.cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.el-card {
  width: 100%;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-form-item {
  display: flex;


}

.required .el-form-item__label::before {
  content: '*';
  color: red;
  margin-right: 0px;
  /* 控制星号与标签文本之间的间距 */
}
.example-basic .el-date-editor {
  margin: 8px;
}
</style>
